<!--
* @description:物资领用
* @fileName: AidRecipients
* @author:孟帅龙
* @date:2021-1-14
* @后台人员:孟帅龙
-->
<template>
  <div>
    <!-- 物资领用 -->
    <div class="wzlyselect">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="领用人：">
          <el-input v-model="Recipient" placeholder="请输入领用人"></el-input>
        </el-form-item>
        <el-form-item label="领用日期：">
          <el-date-picker
            type="date"
            placeholder="请选择领用日期"
            v-model="ReceiveTimek"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="审批状态：">
          <el-select v-model="ApprovalStatusk" placeholder="请选择审批状态">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.DictionaryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批人：">
          <el-input v-model="Approverk" placeholder="请输入审批人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button type="primary" @click="loadReset">重置</el-button>
          <el-button type="success" @click="goBack">新增</el-button>
          <el-button type="danger" @click="handleBatchDelete">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="wzlytable">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="Headlinek" label="标题"> </el-table-column>
        <el-table-column prop="UseDescribes" label="用途描述">
        </el-table-column>
        <el-table-column prop="Recipient" label="领用人"> </el-table-column>
        <el-table-column label="领用日期">
          <template slot-scope="scope">
            {{ scope.row.ReceiveTimek.substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column prop="Remarkm" label="备注"> </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.EstablishTimek.substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column prop="BName" label="审批状态"> </el-table-column>
        <el-table-column prop="Approverk" label="审批人"> </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleUpdateCheck(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="success"
              @click="handleCheck(scope.row)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="success"
              v-if="
                scope.row.ApprovalStatusk == 18 ||
                scope.row.ApprovalStatusk == 19
              "
              @click="handleCheck(scope.row)"
              >{{
                scope.row.ApprovalStatusk == 18 ? "重新提交" : "提交审批"
              }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="wzlypage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
      >
      </el-pagination>
    </div>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="标题：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.Headlinek"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="用途描述：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.UseDescribes"
            placeholder="请输入用途描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.Remarkm"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="领用物品：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.RecipientsItems"
            placeholder="请输入领用物品"
          ></el-input>
        </el-form-item>
        <el-form-item label="领用人：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.Recipient"
            placeholder="请输入领用人"
          ></el-input>
        </el-form-item>
        <el-form-item label="领用日期：" :label-width="formLabelWidth">
          <el-date-picker
            type="date"
            placeholder="请选择领用日期"
            v-model="ruleForm.ReceiveTimek"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="创建日期：" :label-width="formLabelWidth">
          <el-date-picker
            type="date"
            placeholder="请选择创建日期"
            v-model="ruleForm.EstablishTimek"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="审批状态：" :label-width="formLabelWidth">
          <el-select
            v-model="ruleForm.ApprovalStatusk"
            placeholder="请选择审批状态"
            disabled
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.DictionaryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批人：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.Approverk"
            placeholder="请输入审批人"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="标题：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.Headlinek"
            placeholder="请输入标题" disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="用途描述：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.UseDescribes"
            placeholder="请输入用途描述" disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.Remarkm"
            placeholder="请输入备注" disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="领用物品：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.RecipientsItems"
            placeholder="请输入领用物品" disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="领用人：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.Recipient"
            placeholder="请输入领用人" disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="领用日期：" :label-width="formLabelWidth">
          <el-date-picker
            type="date"
            placeholder="请选择领用日期"
            v-model="ruleForm.ReceiveTimek"
            style="width: 100%" disabled
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="创建日期：" :label-width="formLabelWidth">
          <el-date-picker
            type="date"
            placeholder="请选择创建日期"
            v-model="ruleForm.EstablishTimek"
            style="width: 100%" disabled
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="审批状态：" :label-width="formLabelWidth">
          <el-select
            v-model="ruleForm.ApprovalStatusk"
            placeholder="请选择审批状态"
            disabled
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.DictionaryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批人：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.Approverk"
            placeholder="请输入审批人" disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //编号
      RecipientsToApplyNumber: "",
      //标题
      Headlinek: "",
      //用途描述
      UseDescribes: "",
      //备注
      Remarkm: "",
      //领用物品
      RecipientsItems: "",
      //领用人
      Recipient: "",
      //领用日期
      ReceiveTimek: "",
      //创建日期
      EstablishTimek: "",
      //审批状态
      ApprovalStatusk: 0,
      //审批人
      Approverk: "",
      tableData: [],
      pageindex: 1,
      pagesize: 3,
      totalcount: 0,
      ids: [],
      status: [],
      ruleForm: {
        //编号
        RecipientsToApplyNumber: "",
        //标题
        Headlinek: "",
        //用途描述
        UseDescribes: "",
        //备注
        Remarkm: "",
        //领用物品
        RecipientsItems: "",
        //领用人
        Recipient: "",
        //领用日期
        ReceiveTimek: "",
        //创建日期
        EstablishTimek: "",
        //审批状态
        ApprovalStatusk: 0,
        //审批人
        Approverk: "",
      },
      //编辑模态框
      dialogFormVisible: false,
      formLabelWidth: "120px",
      dialogVisible:false,
    };
  },
  methods: {
    //跳转添加页面
    goBack() {
      this.$router.push("/RecipientsToApplyFor");
    },
    //查询显示分页
    loadData() {
      this.$axios
        .get(
          "https://localhost:44399/api/app/recipients-to-appls/recipients-to-appls-page-show",
          {
            //?Recipient=1&ReceiveTimek=2022-2-8&ApprovalStatusk=1&Approverk=1&pageindex=1&pagesize=3
            params: {
              Recipient: this.Recipient,
              ReceiveTimek: this.ReceiveTimek,
              ApprovalStatusk: this.ApprovalStatusk,
              Approverk: this.Approverk,
              pageindex: this.pageindex,
              pagesize: this.pagesize,
            },
          }
        )
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.loadData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = [];
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].Id);
      }
    },
    //重置
    loadReset() {
      this.Recipient = "";
      this.ReceiveTimek = "";
      this.Approverk = "";
      this.ApprovalStatusk = 0;
      this.loadData();
    },
    //删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete(
              "https://localhost:44399/api/app/recipients-to-appls/" +
                row.Id +
                "/recipients-to-appls"
            )
            .then((res) => {
              if (res.data > 0) {
                this.$message.success("删除成功");
                this.loadData();
              } else {
                this.$message.error("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    handleBatchDelete() {
      if (this.ids.length == 0) {
        this.$message.warning("请至少选择一条操作的数据");
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete(
              "https://localhost:44399/api/app/recipients-to-appls/batch-recipients-to-appls?ids=" +
                this.ids.toString()
            )
            .then((res) => {
              if (res.data > 0) {
                this.$message.success("批量删除成功");
                this.loadData();
              } else {
                this.$message.error("批量删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量删除",
          });
        });
    },
    //编辑
    handleEdit() {
      this.$axios
        .put(
          "https://localhost:44399/api/app/recipients-to-appls/update-recipients-to-appls",
          this.ruleForm
        )
        .then((res) => {
          if (res.data > 0) {
            this.$message.success("修改成功");
            this.dialogFormVisible = false;
            this.loadData();
          } else {
            this.$message.error("修改失败");
          }
        });
    },
    //详情
    handleUpdateCheck(row) {
      this.dialogFormVisible = true;
      this.ruleForm = row;
    },
    handleCheck(row) {
      this.dialogVisible = true;
      this.ruleForm = row;
    },
    loadDictionary() {
      this.$axios
        .get("https://localhost:44399/api/app/oil-cost/bind")
        .then((res) => {
          let d = res.data.PageData;
          this.status = d.filter((u) => {
            return u.DictionaryType == "ApprovalStatusk";
          });
          this.status.unshift({ Id: 0, DictionaryName: "请选择" });
        });
    },
  },
  created() {
    this.loadData();
    this.loadDictionary();
  },
};
</script>

<style>
.wzlyselect {
  margin: 10px;
}
.wzlytable {
  margin: 10px;
}
.wzlypage {
  margin: 10px;
}
</style>